<template>
  <div class="order-filter-group">
    <div v-for="(item, index) in filterList" :key="index" style="display: flex; align-items: center;margin-right: 10px;margin-bottom: 24px;">
      <div>
        <el-input v-model.trim="item.listContent" :clearable="isOrderFilter ? true : false" size="small" placeholder="请输入内容" class="height32 input-select input-width-select input-width-select-bg radius-left-not" @input="textInputChange($event)">
          <el-select slot="prepend" v-model="item.listKey" :style="isOrderFilter ? {width: '99px'} : {width: '120px'}" placeholder="请选择" class="changeStatus" popper-class="global-select-down" @visible-change="changeKey" @change="changeSelect">
            <el-option
              v-for="item in keyOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"/>
          </el-select>
        </el-input>
      </div>
      <div v-show="filterList.length !== 1" class="delete-btn" @click="deleteItem(index)">
        <img :src="delIcon" alt="del">
      </div>
    </div>
    <div v-if="isOrderFilter ? (filterList.length < 8) : (filterList.length < 13)" class="add-btn" style="margin-right: 16px;" @click="addItem">
      <img :src="addIcon" alt="add">
    </div>
    <slot />
  </div>
</template>
<script>
import addIcon from '@/assets/reportManage/add_icon.png';
import delIcon from '@/assets/del-icon.png';
export default {
  name: 'OrderFilter',
  props: {
    filterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    keyOption: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isOrderFilter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      addIcon,
      delIcon
    };
  },
  methods: {
    changeKey(val) {
      if (val) {
        // 选择下拉框 已选中的数据不可再点击
        this.keyOption.map(item => {
          const isSelect = this.filterList.findIndex(val => val.listKey === item.value);
          if (isSelect !== -1) {
            item.disabled = true;
          } else {
            item.disabled = false;
          }
        });
      }
    },
    changeSelect() {
      const filterListGroup = this.divideArr(this.filterList);
      this.$emit('filterChange', filterListGroup);
    },
    // 拆分筛选项，合并成一个新的对象
    divideArr(arr) {
      let filterListGroup;
      if (this.isOrderFilter) {
        filterListGroup = {
          orderId: '',
          clientName: '',
          resourceName: '',
          orderPlatform: '',
          attributionMatrix: '',
          market: '',
          accountBelong: '',
          performanceMonth: '',
          orderOperator: '',
          theme: '',
          remark: ''
        };
      } else {
        filterListGroup = {
          resourceName: '',
          executor: '',
          organization: '',
          creator: '',
          regenerator: '',
          business: '',
          payment: '',
          operator: '',
          id: '',
          link: '',
          subject: '',
          case: '',
          remark: ''
        };
      }
      arr.forEach(item => {
        filterListGroup[item.listKey] = item.listContent;
      });
      return filterListGroup;
    },
    textInputChange() {
      const filterListGroup = this.divideArr(this.filterList);
      this.$emit('filterChange', filterListGroup);
    },
    addItem() {
      const initData = {
        listContent: '',
        listKey: ''
      };
      this.filterList.push(initData);
      // 选择下拉框 已选中的数据不可再点击
      this.keyOption.map(item => {
        const isSelect = this.filterList.findIndex(val => val.listKey === item.value);
        if (isSelect !== -1) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
    },
    deleteItem(index) {
      this.filterList.splice(index, 1);
      const filterListGroup = this.divideArr(this.filterList);
      this.$emit('filterChange', filterListGroup);
    }
  }
};
</script>
<style lang="scss" scoped>
.radius-left-not {
  &::v-deep {
    .el-input__inner {
      border-bottom-left-radius: 0 !important;
      border-top-left-radius: 0 !important;
    }
  }
}
.order-filter-group {
  display: flex;
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  &::v-deep {
    .el-input__suffix  {
      top: 0 !important;
    }
  }
  .changeStatus {
    & ::v-deep {
      .el-input input {
        color: #333;
      }
    }
  }
  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius:4px;
    background-color: #EFF3FB;
    margin-bottom: 24px;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-left: 0px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
.height32 {
  // width: 279px;
  &::v-deep {
    .el-input__inner {
      height: 32px !important;
    }
  }
}
.input-width-select-bg {
  & ::v-deep {
    .el-input__inner:last-child {
      background: #Fafafc;
    }
  }
}
</style>
